<template>
    <div class="company-user-list">
        <ul class="global-operation-list">
            <li class="global-operation-left">
                <ul class="global-filter-list">
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">商品名称：</h2>
                        <el-input placeholder="商品名称" v-model="searchForm.spuName" style="width: 250px" clearable
                            @change="getPost"></el-input>
                    </li>
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">订单状态：</h2>
                        <el-select v-model="searchForm.orderStatus" clearable>
                            <el-option v-for="(item, index) in orderStatusList" :key="index" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </li>
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">售后状态：</h2>
                        <el-select v-model="searchForm.refundStatus" clearable>
                            <el-option v-for="(item, index) in afterSaleStatusList" :key="index" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </li>
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">下单时间：</h2>
                        <el-date-picker v-model="searchForm.time" type="datetimerange" range-separator="至"
                            value-format="timestamp" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search" @click="rePosts">搜索</el-button>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="global-table-content">
            <div class="global-table-content-a">
                <el-table :data="dataList" style="width: 100%" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '3px' }" max-height="620" border show-summary :summary-method="getSummaries"
                    v-loading="tableLoading">
                    <el-table-column prop="name" label="商品名" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="orderDate" label="下单时间" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="count" label="数量" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="payPrice" label="成交价/实际支付价" :formatter="formatterPayPrice"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="orderNo" label="订单号" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="status" label="订单状态" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ formatterOrderStatus(scope.row.status) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="refundStatus" label="售后状态" :formatter="formatterAfterRefundStatus"
                        show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <div class="global-page">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" background
                        layout="sizes, total, prev, pager, next" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
import APIThird from "@/api/apiThird";
export default {
    name: "MJShopOrderList",
    components: {},
    props: {
        operationList: Array,
        isShow: Boolean,
    },
    data() {
        return {
            // 表格相关
            tableLoading: true,
            dataList: [],
            pageSize: 20,
            pageNum: 1,
            total: 0,
            pageSizes: [15, 20, 50],
            tokenData: {
                token: "",
            },
            searchForm: {
                spuName: null,
                createStartTime: null,
                createEndTime: null,
                orderStatus: null,
                refundStatus: null,
                time: [],
            },
            dialogTitle: '新增',
            userInfo: {},
            orderStatusList: [],
            afterSaleStatusList: [],
            orderStatusMap: {},
            afterSaleStatusMap: {},
            totalPrice: 0,
        };
    },
    activated() {
        this.tokenData.token = this.$store.state.token;
        this.userInfo = JSON.parse(localStorage.getItem("mujinguserInfo"))
        this.getTradeOrderStatusList()
        this.getAfterSaleStatusList()
        this.getPost()
        this.getCount()
    },
    methods: {
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总价';
                    return;
                }
                console.log(column, index)
                if (column.property == "payPrice"){
                    sums[index] = this.totalPrice;
                }else{
                    sums[index] = '';
                }
            });
            return sums;
        },
        parsePrice(val){
            var num = val
            if (typeof num === 'undefined') return '0.00'
            const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
            return (parsedNumber / 100.0).toFixed(2)
        },
        formatterPayPrice(row, column){
            return this.parsePrice(row.payPrice)
        },
        formatterAfterRefundStatus(row, column) {
            return this.afterSaleStatusMap[row.refundStatus]
        },
        formatterOrderStatus(val){
            return this.orderStatusMap[val]
        },
        formatterDate(time) {
            return this.$moment(time).format("YYYY-MM-DD");
        },
        formatterTime(time) {
            return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
        // 全局初始化
        init() {
            // 搜索条件重置
            this.searchForm = {
                spuName: null,
                createStartTime: null,
                createEndTime: null,
                orderStatus: null,
                refundStatus: null,
                time: [],
            };
            this.rePosts();
            this.getCount()
        },
        // 分页pageSize改变
        handleSizeChange(e) {
            this.pageSize = e;
            this.rePosts();
        },
        // 分页pageNum改变
        handleCurrentChange(e) {
            this.pageNum = e;
            this.getPost();
        },
        // 重新请求
        rePosts() {
            this.pageNum = 1;
            this.dataList = [];
            this.getPost();
            this.getCount()
        },
        // 表格列表
        getPost() {
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            if (this.searchForm.spuName) {
                params.spuName = this.searchForm.spuName
            }
            if (this.searchForm.time && this.searchForm.time.length == 2) {
                params.createStartTime = new Date(this.searchForm.time[0]).getTime()
                params.createEndTime = new Date(this.searchForm.time[1]).getTime()
            }
            if (this.searchForm.orderStatus) {
                params.orderStatus = this.searchForm.orderStatus
            }
            if (this.searchForm.refundStatus) {
                params.refundStatus = this.searchForm.refundStatus
            }
            APIThird.getBusinessOrderList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.total = res.count;
                    res.list.forEach(item => {
                        if (item.orderTime) {
                            item.orderDate = this.formatterTime(item.orderTime)
                        }
                    })
                    this.dataList = res.list;
                    this.tableLoading = false;
                }
            });
        },
        getCount() {
            const params = {
                token: this.$store.state.token,
            };
            if (this.searchForm.spuName) {
                params.spuName = this.searchForm.spuName
            }
            if (this.searchForm.time && this.searchForm.time.length == 2) {
                params.createStartTime = new Date(this.searchForm.time[0]).getTime()
                params.createEndTime = new Date(this.searchForm.time[1]).getTime()
            }
            if (this.searchForm.orderStatus) {
                params.orderStatus = this.searchForm.orderStatus
            }
            if (this.searchForm.refundStatus) {
                params.refundStatus = this.searchForm.refundStatus
            }
            APIThird.getBusinessOrderCount(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.totalPrice = this.parsePrice(res.data)
                    this.tableLoading = false;
                }
            });
        },
        getTradeOrderStatusList() {
            const params = {
                token: this.$store.state.token,
                codes: 'trade_order_status',
            };
            APIThird.getThirdSysLabelList(params).then((res) => {
                if (res.key === 1000) {
                    this.orderStatusList = res.result.list;
                    let map = {}
                    res.result.list.forEach(item => {
                        map[item.value] = item.label
                    })
                    this.orderStatusMap = map;
                }
            });
        },
        getAfterSaleStatusList() {
            const params = {
                token: this.$store.state.token,
                codes: 'trade_order_item_after_sale_status',
            };
            APIThird.getThirdSysLabelList(params).then((res) => {
                if (res.key === 1000) {
                    this.afterSaleStatusList = res.result.list;
                    let map = {}
                    res.result.list.forEach(item => {
                        map[item.value] = item.label
                    })
                    this.afterSaleStatusMap = map;
                }
            });
        },
    },
};
</script>

<style lang="sass">
</style>
<style lang="sass" scoped>

.global-operation-list
  padding-left: 0
.global-select .global-select-btn
  background: #FFFFFF
.global-table-content
  padding: 0
  background-color: white
  width: 100%
.global-table-content-a
  margin: 0 auto
  width: 90%
  padding: 20px 0
.company-user-list
  .global-operation-left
    margin-right: 0
</style>
